<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Table</title>
        <!--link rel="stylesheet" type="text/css" href="../css/mrspliter.css"/-->
        <script type="text/javascript" src="../../../mootools/mootools-core-1.4.5.js"></script>
        <!--script type="text/javascript" src="../../../mootools/mootools-more-1.4.0.1.js"></script-->
        <!--script type="text/javascript" src="../../../jquery/jquery.1.7.1.min.js"></script-->
        <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script-->
        <!--script type="text/javascript" src="../js/mrtreetable.1.7.1.js"></script-->
    </head>
    <script type="text/javascript" charset="utf-8">
        function MrTable(t){
            var that = this;
            $table = $(t);
            
            $container = new Element('div', {
                'class':'mrtablecontainer'
            }).inject($table, 'after');
            
            $border = new Element('div', {
                'class':'mrtableborder'
            });
            
            //create body and head containers
            var $bContainer = new Element('div', {
                'class':'mrbodycontainer'
            });
            
            var $hContainer = new Element('div', {
                'class':'mrheadcontainer'
            });
            
            
            
            function convert(){
                $head = $table.getElement('tHead');
                $body = $table.getElement('tBody');
                
                var tableStyles = $table.getStyles('width', 'height', 'position', 
                    'margin', 'top', 'left', 'right', 'bottom', 'background',
                    'border-bottom', 'border-left', 'border-right', 'border-top');
                    
                //Copy original table values into a new div
                $container.setStyles($table.getStyles('width', 'height'));
                
                console.log($table.clientWidth);
                
                $border.setStyles($table.getStyles('border-bottom', 'border-left', 'border-right', 'border-top'));
                $container.adopt($border);
                
                
                
                //$table.setStyle('width', 'auto');

                
                var tableSize = $table.getSize();
                
                //$container.adopt($hContainer);
                //$container.grab($table);
                
                //Create the header
                var hRow = new Element('div', {
                    'class':'tr'
                });
                
                var columnSizes = $head.getElements('th').getSize();
                columnSizes.each(function(cs,i){
                    var hCell = new Element('div', {
                        'class':'th'
                    });
                    
                    //hCell.setSty
                    
                }, that);
                
                //$container.grab($table);
            }
            
            convert();
            
            
            
            var displayValue = $table.getStyle('display');
            
            //Create a new table to contain the header
            var $hTable = new Element('table');
            
            //Methods
            this.resize = function(){
                var h1 = $container.getStyle('height').toInt();
                var h2 = $hTable.getSize().y;
                
                $bContainer.setStyle('height', h1-h2);
            }
            
            this.getColumn = function(col){
                return $body.getElements('tr').getElements('td').map(function(item){
                    return $(item[col]);
                });
            };
            
            this.setColumnWidth = function(col, width){
                this.getColumn(col).each(function(c, i){
                    c.setStyle('width', width);
                });
            }
            
            /*
            if (displayValue == 'table') displayValue = 'block';
            
            
            $container.setStyle('display', displayValue);
            $container.setStyle('position', 'relative');
            
            $table.setStyle('width', tableSize.x);
            //Copy necessary values for header
            $hTable.setStyles($table.getStyles( 'border-collapse', 'background', 
                'padding-top', 'padding-left', 'padding-right', 
                'border-left', 'border-right', 'border-top'));
            
            
            //Adding the table into the container
            $bContainer.grab($table);
            $container.adopt($bContainer);
            
            var columnSizes = $head.getElements('th').getSize();
            columnSizes.each(function(c,i){
                this.setColumnWidth(i, c.x);
            }, this);
            
            //Grab the header
            $hTable.setStyle('width', tableSize.x);
            $hTable.grab($head);
            $hContainer.adopt($hTable);
            $hContainer.inject($bContainer, 'before');
            
            //Handlers
            $bContainer.addEvent('scroll', function(){
                //$hTable.setPosition({'y':this.scrollTop, 'x':0});
                $hContainer.scrollTo(this.scrollLeft, 0);
                //console.log('scroll top: ' + this.scrollTop + ' left: ' + this.scrollLeft);
            });
            
            //Reset Table settings
            //$table.setStyles({'border': 'none'});
            
            //Resize the table according to the new values
            this.resize();*/
        }
        
        window.addEvent('domready', function(){
            $$('table.mrtable').each(function(h){
                ttt = new MrTable(h);
            });
        });
    </script>
    <style>
        .mrbodycontainer{
            overflow:auto;
            display:block;
            width:100%;
        }
        
        .mrheadcontainer{
            overflow:hidden;
            display:block;
        }
        
        .mrtablecontainer{
            /*-moz-box-sizing:border-box;
            box-sizing:border-box;
            /*background:green;
            overflow:hidden;
            display:block;
            /*margin:-1px 0px 0px -1px;*/
        }
        
        div.mrtableborder{
            width:100%;
            height:100%;
        }
        
        div.tr{
            
        }
        
        div.th{
            
        }
        
        div.td{
            
        }
        
        th {
            margin:0px;
            border:solid black 1px;
            padding:4px;
        }
        
        td{
            margin:0px;
            border:solid black 1px;
            padding:4px;
        }
        
        table.mrtable{
            /*box-sizing:border-box;
            border-collapse:collapse;*/
            border:solid black 2px;
            padding:0px;
        }
        
    </style>
    <body>
        <h1>MRUI</h1>
        <h2>mrtable</h2>
        <h3>Example 1</h3>
        <!--div class="mrtablecontainer" style="width:400px;height:100px;"-->
            <!--div-->
                <table class="mrtable">
                    <thead>
                        <tr>
                            <th style="width:100px;">111111111111111</th>
                            <th style="width:100px;">22</th>
                            <th style="width:100px;">333333333333333</th>
                            <th style="width:100px;">444444444444444</th>
                        </tr>
                    </thead>
                <!--/table-->
            <!--div-->
            <!--table-->
                <tbody>
                    <tr>
                        <td>January</td>
                        <td>$100</td>
                        <td>aaaa</td>
                        <td>1111</td>
                    </tr>
                    <tr>
                        <td>February</td>
                        <td>$80</td>
                        <td>bbbb</td>
                        <td>2222</td>
                    </tr>
                    <tr>
                        <td>February</td>
                        <td>$80</td>
                        <td>cccc</td>
                        <td>3333</td>
                    </tr>
                    <tr>
                        <td>February</td>
                        <td>$80</td>
                        <td>dddd</td>
                        <td>4444</td>
                    </tr>
                    <tr>
                        <td>February</td>
                        <td>$80</td>
                        <td>eeee</td>
                        <td>5555</td>
                    </tr>
                    <tr>
                        <td>February</td>
                        <td>$80</td>
                        <td>ffff</td>
                        <td>6666</td>
                    </tr>
                    <tr>
                        <td>February</td>
                        <td>$80</td>
                        <td>gggg</td>
                        <td>7777</td>
                    </tr>
                    <tr>
                        <td>February</td>
                        <td>$80</td>
                        <td>hhhh</td>
                        <td>8888</td>
                    </tr>
                </tbody>
                
            </table>
        <!--/div-->
    </body>
</html>
